<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-form ref="dataRoom" :model="dataRoom" size="small" :inline="true" label-width="100px">
          <el-form-item label="请选择太空舱" prop="capsuleInfoId">
            <el-select ref="selectRoom" clearable v-model="dataRoom.capsuleInfoId" placeholder="请选择太空舱基地"
              @change="onChange">
              <el-option v-for="(item ,index) in spaceRoomList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="请选择规格" prop="capsuleSpecsId">
            <el-select v-model="dataRoom.capsuleSpecsId" placeholder="规格" :disabled="roomTypeDisable">
              <el-option v-for="(item ,index) in roomTypeList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="房间名称">
            <el-input v-model="dataRoom.roomName" placeholder="请输入房间名称" />
          </el-form-item>
          <el-form-item label="房间状态">
            <el-select v-model="dataRoom.roomStatus" placeholder="请选择房间状态">
              <el-option v-for="item in roomType" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码锁">
            <el-input v-model="dataRoom.lockNum" placeholder="请输入密码锁" />
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="dataRoom.status" placeholder="请选择状态">
              <el-option label="正常" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
              <el-option label="全部" value="99"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网关状态">
            <el-select v-model="dataRoom.gatewayStatus" placeholder="请选择状态">
              <el-option label="正常" value="0"></el-option>
              <el-option label="离线" value="1"></el-option>
              <el-option label="全部" value="99"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间">
            <el-date-picker v-model="tiemValue" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" :editable="false" end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitsear" icon="el-icon-search" size="mini">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="add">新增</el-button>
            <!-- <el-button type="warning" plain icon="el-icon-edit" size="mini" :disabled="single" @click="onChangePrice">改价</el-button> -->
            <el-button size="mini" type="primary" :disabled="multiple" plain icon="el-icon-edit"
              @click.stop="spaceRoomDetail(false, types = 'edit')">编 辑</el-button>
              <el-button size="mini" type="warning" :disabled="multiple" plain icon="el-icon-full-screen"
                @click.stop="getCode">二维码</el-button>
            <el-button size="mini" type="danger" :disabled="multiple" plain icon="el-icon-delete"
              @click="handleDelete">删
              除</el-button>
          </el-col>
        </el-row>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" ref="tableRef" border
          style="width: 100%" class="mb20">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="capsuleInfoTitle" key="capsuleInfoTitle" label="项目" align="center" width="240">
          </el-table-column>
          <el-table-column prop="capsuleSpecsName" key="capsuleSpecsName" label="规格" align="center" width="120">
          </el-table-column>
          <el-table-column prop="roomName" key="roomName" label="房间" align="center" width="140">
          </el-table-column>
          <el-table-column prop="sort" key="sort" label="房间号" align="center">
          </el-table-column>
          <el-table-column prop="din" key="din" label="编号" align="center">
          </el-table-column>
          <el-table-column prop="realOrderPrice" key="realOrderPrice" label="价格" align="center">
            <template slot-scope="scope">
              <div style="color: #e45656;">{{scope.row.realOrderPrice}}元</div>
            </template>
          </el-table-column>
          <el-table-column prop="depositPrice" key="depositPrice" label="押金" align="center">
            <template slot-scope="scope">
              <div style="color: #e45656;">{{scope.row.depositPrice}}元</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="changeStatus" label="改价状态" align="center">
            <template slot-scope="scope">
              <div :style="{color:scope.row.changeStatus == 0 ? '#5ac725' : '#e45656'}">
                {{scope.row.changeStatus == 0 ? '未改价' : '已改价'}}
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="changeStatus" label="是否改价" align="center" width="110">
            <template slot-scope="scope">
              <div class="price">
                <el-button type="danger" plain size="mini" v-if="scope.row.changeStatus == 0"
                  @click="toModify(scope.row.id , scope.row.realOrderPrice)">改价</el-button>
                <el-button type="primary" plain size="mini" v-else @click="toRestore(scope.row.id)">还原</el-button>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="stayOrderPrice" key="stayOrderPrice" label="预定价格" align="center">
            <template slot-scope="scope">
              <div style="color: #e45656;">{{scope.row.stayOrderPrice}}元</div>
            </template>
          </el-table-column> -->
          <el-table-column prop="lockNum" key="lockNum" label="密码锁" align="center" width="110">
          </el-table-column>
          <el-table-column prop="lock" key="lock" label="密码锁" align="center" width="220">
            <template slot-scope="scope">
              <div class="lock">
                <div class="s"><el-button size='mini' plain type="primary"
                    @click.stop="remoteLock(scope.row.lockNum)">远程开锁</el-button>
                </div>
                <div><el-button size='mini' plain type="warning"
                    @click.stop="passwordLock(scope.row.id)">密码开锁</el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="roomStatus" key="roomStatus" label="状态" align="center">
            <template slot-scope="scope">
              <div class="roomStatus"
                :style="{color:scope.row.roomStatus == 0 ? '#5ac725' : (scope.row.roomStatus == 1 ? '#f56c6c' : (scope.row.roomStatus == '2' ? '#f9ae3d' : (scope.row.roomStatus == '3' ? '#909399' :(scope.row.roomStatus == '4' ? '#f9ae3d' : '#3c9cff'))))}">
                {{scope.row.roomStatus == 0 ? '空闲' : (scope.row.roomStatus == 1 ? '入住中' : (scope.row.roomStatus == '2' ? '维修' : (scope.row.roomStatus == '3' ? '已下线' :(scope.row.roomStatus == '4' ? '保洁' : '预定'))))}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="electricStatus" key="electricStatus" label="电闸" align="center" width="140">
            <template slot-scope="scope">
              <!-- <el-switch v-model="scope.row.electricStatus == 1 ? true : false" active-color="#5ac725"
                inactive-color="#9fa2a8" @change="changeElectric(scope.row.electricStatus , scope.row.id)">
              </el-switch> -->
              <div class="electricStatus" v-if="scope.row.electricCid != ''">
                <el-button size="mini" plain type="primary"
                  @click.stop="changeElectric(11 , scope.row.id)">开电</el-button>
                <el-button size="mini" plain type="warning"
                  @click.stop="changeElectric(10 , scope.row.id)">关电</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="gatewayStatus" key="gatewayStatus" label="网关" align="center">
            <template slot-scope="scope">
              <div class="gatewayStatus" :style="{color:scope.row.gatewayStatus == 0 ? '#5ac725' : '#9fa2a8'}">
                {{scope.row.gatewayStatus == 0 ? '在线' : '离线'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="electricCid" key="electricCid" label="电表采集" align="center" width="120">
          </el-table-column>
          <el-table-column prop="stayType" key="stayType" label="房间类型" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.stayType == 0 ? '日租房' : '钟点房'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="checkInTime" key="checkInTime" label="入住时间" align="center" width="100">
          </el-table-column>
          <el-table-column prop="checkOutTime" key="checkOutTime" label="退房时间" align="center" width="100">
          </el-table-column>
          <el-table-column label="开锁记录" align="center" width="90">
            <template slot-scope="scope">
              <el-button size="mini" plain type="primary" @click="onChangeLock(scope.row.id)">去查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="viewImgs" label="图片" align="center" width="200">
            <template slot-scope="scope">
              <div class="imgs" style="display: flex;">
                <img width="40px" height="40px" v-for="(item ,index) in scope.row.imgs" :key="index" :src="item.url">
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" key="createTime" label="创建时间" align="center" width="160">
          </el-table-column>
          <el-table-column label="操作" width="90" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-document"
                @click.stop="spaceRoomDetail(scope.row.id , types = 'detail')">详 情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="dataRoom.pageNum" :page-size="dataRoom.pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 新增和修改 -->
    <el-dialog :title="types == 'add'?'新增房间':(types == 'edit'?'编辑房间':'房间详情')" :visible.sync="roomVisibles" width="40%"
      :before-close="handleClose">
      <el-form ref="fromRooms" :model="fromRooms" label-width="120px" :rules="rules">
        <el-row>
          <el-col :span="11">
            <el-form-item label="请选择太空舱" prop="capsuleInfoId">
              <el-select ref="selectRoom" v-model="fromRooms.capsuleInfoId" placeholder="请选择太空舱基地" :disabled="flag"
                @change="onChange">
                <el-option v-for="(item ,index) in spaceRoomList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="请选择规格" prop="capsuleSpecsId">
              <el-select v-model="fromRooms.capsuleSpecsId" placeholder="规格" :disabled="roomTypeDisable">
                <el-option v-for="(item ,index) in roomTypeList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间名称" prop="roomName">
              <el-input v-model="fromRooms.roomName" placeholder="请输入房间名称" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间编号" prop="din">
              <el-input v-model="fromRooms.din" placeholder="请输入房间名称" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间序号" prop="sort">
              <el-input v-model="fromRooms.sort" placeholder="请输入排序号" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间状态" prop="roomStatus">
              <el-select v-model="fromRooms.roomStatus" placeholder="房间状态">
                <el-option v-for="item in roomType" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间类型" prop="stayType">
              <el-select v-model="fromRooms.stayType" placeholder="房间类型">
                <el-option label="全日房" value="0"></el-option>
                <el-option label="钟点房" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="真实价格" prop="realOrderPrice">
              <el-input type="number" v-model="fromRooms.realOrderPrice" placeholder="请输入房间价格" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间押金" prop="depositPrice">
              <el-input type="number" v-model="fromRooms.depositPrice" placeholder="请输入房间押金" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="预定价格" prop="stayOrderPrice">
              <el-input type="number" v-model="fromRooms.stayOrderPrice" placeholder="请输入房间预定价格" />
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="退房时间" prop="valueTime">
              <el-time-picker is-range v-model="valueTime" :clearable="false" range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" value-format="HH:mm:ss"
                @change="changeTime">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间密码" prop="lockNum">
              <el-input type="number" v-model="fromRooms.lockNum" placeholder="请输入房间密码" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="11">
            <el-form-item label="表 号" prop="electricAddress">
              <el-input v-model="fromRooms.electricAddress" placeholder="请输入房间表号" />
            </el-form-item>
          </el-col> -->
          <el-col :span="22">
            <el-form-item label="电表采集器" prop="electricCid">
              <el-input v-model="fromRooms.electricCid" placeholder="请输入房间电表采集号" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="11">
            <el-form-item label="电 表" prop="electricMeter">
              <el-input v-model="fromRooms.electricMeter" placeholder="请输入房间电表" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="11">
            <el-form-item label="水 表" prop="waterMeter">
              <el-input v-model="fromRooms.waterMeter" placeholder="请输入房间水表号" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="11">
            <el-form-item label="电 闸" prop="electricStatus">
              <el-switch v-model="electric_status" active-color="#13ce66" inactive-color="#d1d1d1">
              </el-switch>
            </el-form-item>
          </el-col> -->
          <el-col :span="11">
            <el-form-item label="是否停用" prop="room_status">
              <el-switch v-model="room_status" active-color="#13ce66" inactive-color="#d1d1d1">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传图片" prop="viewImgs" class="upLaods">
              <image-much-upload v-if="types == 'add' || types == 'edit'" :limit="4" :multiple="true"
                ref="fileUploadRefs" :disabled="!addDisabled" v-model="imgList" @handleRemove="handleRemove"
                @handleUploadSuccess="handleUploadSuccess" />
              <div v-else class="imgList">
                <img v-for="(item ,index) in imgList" :key="index" :src="item.url" alt="" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="types == 'add' || types == 'edit'">
        <el-button @click="roomVisibles = false">取 消</el-button>
        <el-button type="primary"
          @click="types == 'add' ? onSubmit('fromRooms') : (types == 'detail'? '' : handleEdit_())">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改价格 -->
    <el-dialog title="修改价格" :visible.sync="modifyPriceVisible" width="42%" :before-close="modifyPriceClose">
      <el-form ref="fromDataPrice" :model="fromDataPrice" label-width="180px" :rules="priceRules">
        <el-form-item label="当前房间价格" prop="price">
          <el-input v-model="price" :disabled="true" />
        </el-form-item>
        <el-form-item label="修改之后价格" prop="changeAfterRealPrice">
          <el-input type="number" v-model="fromDataPrice.changeAfterRealPrice" placeholder="请输入需要修改的价格" />
        </el-form-item>
        <el-form-item label="修改价格原因" prop="changeReason">
          <el-input v-model="fromDataPrice.changeReason" type="textarea" placeholder="请输入需要修改的原因" />
        </el-form-item>
        <el-form-item label="改价来源" prop="changeSourceType">
          <el-select v-model="fromDataPrice.changeSourceType" placeholder="请选择改价来源">
            <el-option label="美团" value="0"></el-option>
            <el-option label="抖音" value="1"></el-option>
            <el-option label="携程" value="2"></el-option>
            <el-option label="其它" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="第三方支付的实际金额" prop="otherPayPrice">
          <el-input type="number" v-model="fromDataPrice.otherPayPrice" placeholder="请输第三方支付的实际金额" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="types == 'add' || types == 'edit'">
        <el-button @click="modifyPriceVisible = false">取 消</el-button>
        <el-button type="primary" @click="onModifyPrice('fromDataPrice')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 开门密码 -->
    <el-dialog title="开门密码" :visible.sync="passwordLockVisible" width="32%">
      <div class="pass">
        <span class="t">当前开门密码为：</span>
        <span class="num">#{{passwordLockData}}</span>
      </div>
    </el-dialog>
    <el-dialog title="二维码" :visible.syn="qrcodeVisible" width="35" :before-close="onqrcodeVisible">
      <div class="qrcodes">
        <el-image :src="imgs" style="width: 450px;height: 100%;" />
        <el-button type="primary" @click="download" style="display: block;">保存图片</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // import { ids } from 'webpack'
  import {
    getRoomList,
    getRoomDetail,
    roomAdd,
    deleteRoom,
    RoomPrice,
    roomType,
    revertPrice,
    onPower,
    remoteLock,
    passwordLock,
    qrcode
  } from '@/api/space/room'
  import {
    capsuleInfoSelects
  } from '@/api/space/spaceRoom'
  import ImageMuchUpload from "@/components/upload/upload"
  export default {
    components: {
      ImageMuchUpload
    },
    data() {
      return {
        loading: true,
        tableData: [],
        total: 0,
        types: 'add',
        roomVisibles: false,
        passwordLockVisible: false,
        passwordLockData: '',
        room_status: true,
        electric_status: true,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        dataRoom: {
          // "capsuleInfoId": '', // 基地ID
          // "capsuleSpecsId": '', // 基地规格
          "createBeginTime": "",
          "createEndTime": "",
          "gatewayStatus": '', // 网关状态 0 1 99
          "lockNum": "", // 密码锁
          "pageNum": 1,
          "pageSize": 10,
          "roomName": "", // 房间名称
          "roomStatus": '', // 房间状态：0-空闲，1-入住，2-维修，3-下线，4-保洁，99-全部
          "status": '' // 状态：0-正常，1-停用，99-全部
        },
        tiemValue: '',
        roomType: [{
            label: '空闲',
            value: '0'
          },
          {
            label: '入住',
            value: '1'
          },
          {
            label: '维修',
            value: '2'
          },
          {
            label: '下线',
            value: '3'
          },
          {
            label: '保洁',
            value: '4'
          },
          {
            label: '全部',
            value: '99'
          }
        ],
        spaceRoomList: [],
        roomTypeList: [],
        roomTypeDisable: false,
        imgList: [],
        fromRooms: {
          "capsuleInfoId": '',
          "capsuleSpecsId": '',
          "checkInTime": "06:00:00",
          "checkOutTime": "12:00:00",
          "depositPrice": 0,
          "din": "",
          "electricAddress": "",
          "electricCid": "",
          "electricMeter": "",
          "electricStatus": "",
          "lockNum": "",
          "realOrderPrice": "",
          "roomName": "",
          "roomStatus": '',
          "sort": '',
          "status": '',
          "stayOrderPrice": "",
          "stayType": '',
          "viewImgs": [],
          "waterMeter": ""
        },
        rules: {
          capsuleInfoId: [{
            required: true,
            // validator:capsuleValidator,
            message: '请选择所太空舱基地',
            trigger: ['blur']
          }],
          roomName: [{
            required: true,
            message: '请输入房间名称',
            trigger: 'blur'
          }],
          din: [{
            required: true,
            message: '请输入房间编号',
            trigger: 'blur'
          }],
          realOrderPrice: [{
            required: true,
            message: '请输入房间价格',
            trigger: 'blur'
          }],
          stayType: [{
            required: true,
            message: '请选择房间类型：钟点房/全日房',
            trigger: 'blur'
          }],
          lockNum: [{
            required: true,
            message: '请输入房间开门密码',
            trigger: 'blur'
          }],
          checkInTime: [{
            required: true,
            message: '请设置入住时间',
            trigger: 'blur'
          }],
          checkOutTime: [{
            required: true,
            message: '请设置退房时间',
            trigger: 'blur'
          }],
          viewImgs: [{
            required: true,
            message: '请最少上传一张图',
            trigger: 'blur'
          }],
          valueTime: [{
            required: false,
            message: '请设置退房时间',
            trigger: 'blur'
          }]
        },
        dialogImageUrl: '',
        addDisabled: false,
        modifyPriceVisible: false,
        price: 1200,
        fromDataPrice: {
          "changeAfterRealPrice": "", //改价后的真实价格
          "changeReason": "", //改价原因
          "changeSourceType": "", //改价来源 0 1 2 美团 抖音 携程
          "id": "", //id
          "otherPayPrice": "" //三方平台支付的实际金额
        },
        priceRules: {
          changeAfterRealPrice: [{
            required: true,
            message: '请设置需要修改的价格',
            trigger: 'blur'
          }],
          changeReason: [{
            required: true,
            message: '请填写修改价格原因',
            trigger: 'blur'
          }],
          changeSourceType: [{
            required: true,
            message: '请输入价格来源',
            trigger: 'blur'
          }],
          otherPayPrice: [{
            required: true,
            message: '请输入第三方实际金额',
            trigger: 'blur'
          }]
        },
        flag: false,
        valueTime: ['06:00:00', '12:00:00'],
        qrcodeVisible: false,
        imgs: '',
        title: '',
        single: true,
        multiple: true,
        ids: ''
      }
    },
    created() {
      this.getRoomList()
      capsuleInfoSelects().then(res => {
        this.spaceRoomList = res.data
      })
      this.$nextTick(() => {
        // console.log(this.$refs.tableRef.bodyWrapper.children[0])
      })
    },
    methods: {
      changeTime() {
        this.fromRooms.checkInTime = this.valueTime[0]
        this.fromRooms.checkOutTime = this.valueTime[1]
      },
      // 规格
      onChange(e) {
        this.roomTypeList = []
        this.fromRooms.capsuleSpecsId = ''
        if (e && e != '') { // 子规格
          roomType(e).then(res => {
            this.roomTypeList = res.data
            this.roomTypeDisable = false
          })
        }
      },
      // 获取列表
      getRoomList() {
        this.loading = true
        this.dataRoom.pageNum = this.queryParams.pageNum
        this.dataRoom.pageSize = this.queryParams.pageSize
        getRoomList(this.dataRoom).then(res => {
          res.data.rows.forEach((item, key) => {
            this.$set(item, 'imgs', JSON.parse(item.viewImgs))
          })
          this.tableData = res.data.rows
          this.total = res.data.total
          this.loading = false
          this.tiemValue = ''
        })
      },
      onSubmitsear() {
        if (this.tiemValue && this.tiemValue.length > 0) {
          this.dataRoom.createBeginTime = this.tiemValue[0]
          this.dataRoom.createEndTime = this.tiemValue[1]
        } else {
          this.dataRoom.createBeginTime = ''
          this.dataRoom.createEndTime = ''
        }
        if (this.dataRoom.status == '') {
          this.dataRoom.status = '99'
        }
        if (this.dataRoom.gatewayStatus == '') {
          this.dataRoom.gatewayStatus = '99'
        }
        if (this.dataRoom.roomStatus == '') {
          this.dataRoom.roomStatus = '99'
        }
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = 10
        // console.log(this.dataRoom, 'room')
        this.getRoomList()
      },
      handleSizeChange(val) {
        this.queryParams.pageNum = val
        this.getRoomList()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.getRoomList()
      },
      resetQuery() {
        this.dataRoom = { // 重置
          "createBeginTime": "",
          "createEndTime": "",
          "gatewayStatus": '',
          "lockNum": "",
          "pageNum": 1,
          "pageSize": 10,
          "roomName": "",
          "roomStatus": '',
          "status": ''
        }
        this.getRoomList()
      },
      handleClose() {
        this.roomVisibles = false
        this.fromRooms = { // 重置
          "capsuleInfoId": '',
          "capsuleSpecsId": '',
          "checkInTime": "06:00:00",
          "checkOutTime": "12:00:00",
          "depositPrice": 0,
          "din": "",
          "electricAddress": "",
          "electricCid": "",
          "electricMeter": "",
          "electricStatus": "",
          "lockNum": "",
          "realOrderPrice": "",
          "roomName": "",
          "roomStatus": '',
          "sort": '',
          "status": '',
          "stayOrderPrice": "",
          "stayType": '',
          "viewImgs": [],
          "waterMeter": ""
        }
      },
      // 上传
      handleRemove(file, index) {
        this.imgList.forEach((item, ik) => {
          if (item == file.url) {
            this.$delete(this.imgList, ik)
          }
        })
        this.imgList.splice(index, 1)
        this.fromRooms.viewImgs = JSON.stringify(this.imgList)
      },
      handleUploadSuccess(url) {
        this.imgList = this.imgList.concat(url)
        this.fromRooms.viewImgs = JSON.stringify(this.imgList)
      },
      add() {
        this.flag = false
        this.types = 'add'
        this.$nextTick(() => {
          this.$refs.fileUploadRefs.$refs.UploadRef.clearFiles()
        })
        this.imgList = []
        this.roomVisibles = true
      },
      // 新增或修改
      roomAdd(data) {
        roomAdd(data).then(res => {
          this.$message({
            message: '提交成功！',
            type: 'success'
          })
          this.fromRooms = { // 重置
            "capsuleInfoId": '',
            "capsuleSpecsId": '',
            "checkInTime": "06:00:00",
            "checkOutTime": "12:00:00",
            "depositPrice": 0,
            "din": "",
            "electricAddress": "",
            "electricCid": "",
            "electricMeter": "",
            "electricStatus": "",
            "lockNum": "",
            "realOrderPrice": "",
            "roomName": "",
            "roomStatus": '',
            "sort": '',
            "status": '',
            "stayOrderPrice": "",
            "stayType": '',
            "viewImgs": [],
            "waterMeter": ""
          }
          this.imgList = []
          this.roomVisibles = false
          this.getRoomList()
        })
      },
      onSubmit(fromRooms) {
        if (this.electric_status) {
          this.fromRooms.electricStatus = 0
        } else {
          this.fromRooms.electricStatus = 1
        }
        if (this.room_status) {
          this.fromRooms.status = 0
        } else {
          this.fromRooms.status = 1
        }
        if (this.imgList.length > 0) {
          this.fromRooms.viewImgs = JSON.stringify(this.imgList)
        }
        this.$refs[fromRooms].validate((valid) => {
          if (valid) {
            // console.log(this.fromRooms)
            this.roomAdd(this.fromRooms)
          }
        })
      },
      spaceRoomDetail(id) {
        this.flag = true
        getRoomDetail(id ?  id :this.ids.id).then(res => {
          let data = res.data
          let {
            capsuleInfoId,
            capsuleSpecsId,
            checkInTime,
            checkOutTime,
            depositPrice,
            din,
            electricAddress,
            electricCid,
            electricMeter,
            electricStatus,
            lockNum,
            realOrderPrice,
            roomName,
            roomStatus,
            sort,
            status,
            stayOrderPrice,
            stayType,
            viewImgs,
            waterMeter,
            id
          } = data
          this.imgList = JSON.parse(viewImgs)
          if (electricStatus == '0') {
            this.electric_status = true
          } else {
            this.electric_status = false
          }
          if (status == 0) {
            this.room_status = true
          } else {
            this.room_status = false
          }
          if (stayType == 0) {
            data.stayType = '全日房'
          } else {
            data.stayType = '钟点房'
          }
          roomType(capsuleInfoId).then(res => {
            this.roomTypeList = res.data
            res.data.map(item => {
              if (item.value == capsuleSpecsId) {
                // data.capsuleSpecsId = item.label
              }
            })
          })
          this.roomType.map(item => {
            if (item.value * 1 == roomStatus) {
              data.roomStatus = item.label
            }
          })
          this.fromRooms = data
          this.roomVisibles = true
        })
      },
      // 编辑
      handleEdit_() {
        this.flag = true
        let parmas = this.fromRooms
        if (this.electric_status) {
          parmas.electricStatus = 0
        } else {
          parmas.electricStatus = 1
        }
        if (this.room_status) {
          parmas.status = 0
        } else {
          parmas.status = 1
        }
        if (this.fromRooms.stayType == '全日房') {
          parmas.stayType = '0'
        }
        if (this.fromRooms.stayType == '钟点房') {
          parmas.stayType = '1'
        }
        roomType(this.fromRooms.capsuleInfoId).then(res => {
          this.roomTypeList = res.data
          res.data.map(item => {
            if (item.label == this.fromRooms.capsuleSpecsId) {
              parmas.capsuleSpecsId = item.value
            }
          })
        })
        this.roomType.map(item => {
          if (item.label == this.fromRooms.roomStatus) {
            parmas.roomStatus = item.value
          }
        })
        // console.log('parmas-->',parmas)
        this.roomAdd(parmas)
      },
      handleDelete() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteRoom(this.ids.id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getRoomList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            }
          })
        })
      },
      toModify(id, price) {
        this.fromDataPrice.id = id
        this.price = price
        this.modifyPriceVisible = true
      },
      toRestore(id) {
        this.$confirm('确定还原当前房间价格吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          revertPrice(id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '还原成功!'
              })
              this.getRoomList()
            } else {
              this.$message({
                type: 'error',
                message: '还原失败失败'
              })
            }
          })
        })
      },
      onModifyPrice(fromDataPrice) {
        this.$refs[fromDataPrice].validate((valid) => {
          if (valid) {
            RoomPrice(this.fromDataPrice).then(res => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.modifyPriceVisible = false
              this.getRoomList()
            })
          }
        })
      },
      modifyPriceClose() {
        this.modifyPriceVisible = false
        this.fromDataPrice = { //重置
          "changeAfterRealPrice": "",
          "changeReason": "",
          "changeSourceType": "",
          "id": "",
          "otherPayPrice": ""
        }
      },
      onPower(type, id) {
        onPower({
          id: id,
          type: type
        }).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        })
      },
      changeElectric(type, id) {
        if (type == 11) {
          this.$confirm('您确定打开电源吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.onPower(type, id)
          })
        }
        if (type == 10) {
          this.$confirm('您确定关闭电源吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            type = 10
            this.onPower(type, id)
          })
        }
      },
      onChangeLock(id) {
        this.$router.push({
          path: '/orderSys/unlockingRecord',
          query: {
            id: id
          }
        })
      },
      async passwordLock(id) {
        const data = await passwordLock(id)
        const loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        loading.close()
        if (data.code == 200) {
          this.passwordLockData = data.data
          this.passwordLockVisible = true
        }
      },
      async remoteLock(id) {
        const loading = this.$loading({
          lock: true,
          text: '远程开锁中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        const data = await remoteLock(id)
        loading.close()
        if (data.code == 200) {
          if (data.data === '当前蓝牙锁未配置网关！') {
            this.$message({
              message: data.data + '请密码开锁',
              type: 'warning'
            })
          } else {
            this.$message({
              message: data.data,
              type: 'success'
            })
          }
        }
      },
      onqrcodeVisible() {
        this.qrcodeVisible = false
      },
      // 二维码
      getCode(id, name) {
        const loading = this.$loading({
          lock: true,
          text: '生成中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        qrcode({
          capsuleRoomId: this.ids.id
        }).then(res => {
          // console.log("res--->", res)
          loading.close()
          if (res.code == 200) {
            this.imgs = 'data:image/png;base64,' + res.data
            this.title = this.ids.capsuleInfoTitle + this.ids.roomName
            this.qrcodeVisible = true
          }
        })
      },
      // 下载
      download() {
        let that = this
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(that.img.split(',')[1])
          var n = bstr.length
          var u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          var blob = new Blob([u8arr])
          window.navigator.msSaveOrOpenBlob(blob, that.title + '.' + 'png')
        } else {
          // 这里就按照chrome等新版浏览器来处理
          const a = document.createElement('a')
          a.href = that.imgs
          a.setAttribute('download', that.title)
          a.click()
          this.qrcodeVisible = false
        }
      },
      handleSelectionChange(selection) {
        let data = selection.map(item => item)
        this.ids = data[0]
        this.single = !selection.length
        this.multiple = selection.length != 1
        if(selection.length > 1){
          this.$refs.tableRef.clearSelection()
          this.$refs.tableRef.toggleRowSelection(selection.pop())
        }
        // console.log("selection-->",selection)

      },
      onChangePrice(row) {
        // console.log('row-->',row)
        console.log("ids-->", this.ids)
      }
    }
  }
</script>
<style>

</style>
<style lang="scss" scoped>
  ::v-deep .el-table .has-gutter .el-checkbox .el-checkbox__inner {
    display: none;
  }
  .gatewayStatus {
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    padding: 3px 0;
  }

  .roomStatus {
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    padding: 3px 0;
  }

  .imgs,
  .imgList {
    display: flex;
    align-items: center;
    // justify-content: space-around;
    flex-wrap: wrap;
  }

  .imgs {
    img {
      margin-right: 4px;
    }
  }

  .imgList {
    img {
      width: 80px;
      height: 80px;
      margin-right: 4px;
      background: #f5f5f5;
      border-radius: 4px;
    }
  }

  .price {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .electricStatus {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .lock {
    display: flex;
    align-items: center;
    justify-content: space-around;
    // flex-direction: column;
    // justify-content: space-between;

    .s {
      margin-bottom: 8px;
    }
  }

  .pass {
    display: flex;
    align-items: center;

    .t {}

    .num {
      font-size: 24px;
      color: #0eb83a;
    }
  }

  .qrcodes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
</style>
